<script setup>
import { ref } from 'vue';
import { listApi } from '@/api/sys/dept';

const props = defineProps({
  disabled: {
    type: Boolean,
    default: false
  },
  multiple: {
    type: Boolean,
    default: false
  },
  value: [String,Array]
});

const emits = defineEmits(['update:value', 'change']);

const deptList = ref([])
const init = () => {
  listApi().then(({data:res}) => {
    deptList.value = res.data
  })
}
const onChange = (value, labels) => {
  emits('update:value',value)
  emits('change',labels)
}
init()
</script>

<template>
  <div>
    <a-tree-select
      :value="props.value"
      show-search
      style="width: 100%"
      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
      placeholder="请选择部门"
      allow-clear
      :disabled="props.disabled"
      :multiple="props.multiple"
      tree-default-expand-all
      :field-names="{
        label: 'name',
        value: 'id',
      }"
      :treeData="deptList"
      tree-node-filter-prop="name"
      @change="onChange"
      @search="(value)=>emits('update:value',value || undefined)"
    >
    </a-tree-select>
  </div>
</template>

<style lang="scss" scoped>

</style>